import React, { Component } from 'react';
import { Card, Button, Table, Select, Input, message } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import '../css/mall.css';
import LinkButton from './LinkButton';
import MemoryUtils from '../utils/MemoryUtils';
const Option = Select.Option;

export default class Mall extends Component {
    state = {
        loading: false,
        goodsList: [],
        searchType: 'goods_name',
        key: ''
    }
    initColumns = () => {
        this.columns = [
            {
                title: '商品名称',
                dataIndex: 'goods_name',
            },
            {
                title: '商品描述',
                dataIndex: 'goods_title',
            },
            {
                title: '价格',
                dataIndex: 'goods_price',
                render: (goods_price) => '￥' + goods_price
            },
            {
                title: '操作',
                width: 100,
                render: (goodsObj) =>
                    <span>
                        <LinkButton
                            onClick={() => {
                                MemoryUtils.goods = goodsObj;
                                this.props.history.push('/mall/detail')
                            }} >详情</LinkButton>
                        <LinkButton
                            onClick={() => {
                                MemoryUtils.goods = goodsObj;
                                this.props.history.push('/mall/addgoods')
                            }}
                        >修改</LinkButton>
                        <LinkButton onClick={() => {
                            fetch('http://82.157.94.115:2005/deletegoods', {
                                method: 'POST',
                                body: JSON.stringify(goodsObj),
                                headers: {
                                    'Content-Type': 'application/json;charset=utf-8'
                                }
                            })
                                .then(res => res.json())
                                .then(res => {
                                    message.success('删除成功！')
                                    this.getGoods();
                                })
                                .catch(error => {
                                    message.error('删除失败！')
                                })
                        }}>
                            删除
                        </LinkButton>
                    </span>

            },
        ]
    }
    getGoods = () => {
        const { key, searchType } = this.state;
        if (!key) {
            fetch('http://82.157.94.115:2005/goods')
                .then(res => res.json())
                .then(res => {
                    this.setState({ goodsList: res.goodsObj });
                })
        } else {
            fetch('http://82.157.94.115:2005/fuzzyquerygoods',{
                method: 'POST',
                body: JSON.stringify({key: key,searchType: searchType}),
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                }
            })
                .then(res => res.json())
                .then(res => {
                    console.log(res);
                    this.setState({ goodsList: res.fuzzyquerygoodsObj });
                })
                .catch(error => {
                    console.log(error);
                    console.log(JSON.stringify({key: key,searchType: searchType}));
                })
        }

    }



    componentDidMount() {
        this.getGoods();
    }
    componentWillMount() {
        this.initColumns();
    }
    render() {
        const { goodsList, loading, key, searchType } = this.state;
        const title = (
            <span>
                <Select
                    className='select'
                    value={searchType}
                    onChange={(value) => this.setState({ searchType: value })}
                >
                    <Option value='goods_name'>按名称搜索</Option>
                    <Option value='goods_title'>按描述搜索</Option>
                </Select>
                <Input
                    id='input_mall'
                    placeholder='关键字'
                    value={key}
                    onChange={event => this.setState({ key: event.target.value })}
                ></Input>
                <Button type='primary' onClick={() => { this.getGoods() }}>搜索</Button>
            </span>
        )
        const extra = (
            <Button type='primary' onClick={() => {
                MemoryUtils.goods = {}
                this.props.history.push('/mall/addgoods')
            }}>
                <PlusOutlined />
                添加商品
            </Button>
        )
        return (
            <Card title={title} extra={extra}>
                <Table
                    bordered={true}
                    columns={this.columns}
                    loading={loading}
                    dataSource={goodsList}
                    pagination={{ defaultPageSize: 3, showQuickJumper: true }}
                />
            </Card>
        )
    }
}

// {
            //     title: '状态',
            //     dataIndex: 'status',
            //     render: ({status,goods_id}) => {
            //         let btnText = '下架'
            //         let text = '在售'
            //         if (status === 2) {
            //             btnText = '上架'
            //             text = '已上架'
            //         }
            //         return (
            //             <span>
            //                 <button onClick={()=> { this.updateStatus() }}>{btnText}</button>
            //                 <span>{text}</span>
            //             </span>
            //         )
            //     }
            // },
